<template>
  <!-- 统计分析 -->
  <div class="coun-analyse-container">
    <div id="total-box" ref="totalBox"></div>
    <div id="break-box" ref="breakBox"></div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { getAllUserInfo } from "@/api/user.js";
import { getBreakScoreList } from "@/api/break";
import * as echarts from "echarts";
export default {
  components: {},
  data() {
    return {
      tableData: [],
      breakList: [],
    };
  },
  computed: {
    ...mapState("user", ["token"]),
    ...mapGetters(["sidebar", "avatar", "name"]),
  },
  async mounted() {
    await this.getAllUserInfo();
    await this.getBreakScoreList();
    this.initTotal();
    this.initBreak();
  },
  methods: {
    async getAllUserInfo() {
      const { data: res } = await getAllUserInfo();
      this.tableData = res || [];
    },
    async getBreakScoreList() {
      const { data: res } = await getBreakScoreList();

      this.breakList = res || [];
    },
    initTotal() {
      //echarts示例官网: https://echarts.apache.org/v4/examples/zh/index.html#chart-type-bar
      let usernameList = [];
      let examScoreList = [];
      this.tableData.map((item) => {
        usernameList.push(item.username);
        examScoreList.push(+item?.examScore || 0);
      });
      const option = {
        title: {
          text: "驾驶员成绩柱状图",
          // subtext: '二级标题',
          left: "center",
          align: "right",
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        // backgroundColor: "rgba(0, 0, 0, 0.1)",
        xAxis: [
          {
            type: "category",
            data: usernameList,
            axisTick: {
              alignWithLabel: true,
            },
            name: "用户名",
          },
        ],
        yAxis: [
          {
            type: "value",
            show: true,
            name: "分数",
          },
        ],
        series: [
          {
            name: "考试分数",
            type: "bar",
            barWidth: "60%",
            data: examScoreList,
          },
        ],
      };
      echarts.init(this.$refs.totalBox).setOption(option);
    },
    initBreak() {
      //echarts示例官网: https://echarts.apache.org/v4/examples/zh/index.html#chart-type-bar
      let usernameList = [];
      let totalScore = [];
      this.breakList.map((item) => {
        usernameList.push(item.username);
        totalScore.push(+item?.totalScore || 0);
      });
      const option = {
        title: {
          text: "驾驶员违章分数柱状图",
          // subtext: '二级标题',
          left: "center",
          align: "right",
        },
        color: ["#4ebf8b"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        // backgroundColor: "rgba(0, 0, 0, 0.1)",
        xAxis: [
          {
            type: "category",
            data: usernameList,
            axisTick: {
              alignWithLabel: true,
            },
            name: "用户名",
          },
        ],
        yAxis: [
          {
            type: "value",
            show: true,
            name: "总违章分数",
          },
        ],
        series: [
          {
            name: "总违章分数",
            type: "bar",
            barWidth: "60%",
            data: totalScore,
          },
        ],
      };
      echarts.init(this.$refs.breakBox).setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.coun-analyse-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  #total-box {
    width: 1000px;
    height: 380px;
    margin-bottom: 20px;
    background-color: #eee;
  }
  #break-box {
    width: 1000px;
    height: 380px;
    background-color: #eee;
  }
  .el-card {
    padding: 20px;
    .flex-center {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      margin-top: 50px;
    }
  }
}
.btn-list {
  display: flex;
  justify-content: center;
  .el-button {
    width: 200px;
  }
}
</style>
